<template>
  <div class="card_container">
    <div class="card" v-for="(card, index) in props.gamblingList" :key="index" @click="goToGameRoom(card)">
      <div class="info">
        <div class="title">
          <span class="text" :style="getBackgroundStyle(card.game_type)">
            {{ card.game_type == 49 ? playType[card.play_type] : '' }}{{ gameClubIds[card.game_type] }}
          </span>
          {{ card.desk_name }}
        </div>
        <div class="details">
          <ImgT src="/imgs/club/jinbi.png" :key="'jinbi'" class="jinbi" alt="" />
          <span class="price">{{ card.min_bet }} / {{ card.min_bet * 2 }}</span>
        </div>
      </div>
      <div class="players_box">
        <span class="players">
          <iconpark-icon name="users" size="20" class="icon_player" />
          <span>{{ card.role_count + '/' + card.max_player }}</span>
        </span>
      </div>
      <div class="action">
        <div class="button">
          <div>
            <p>{{ t('club_page_pay') }}</p>
            <p class="price">{{ card.need_chip }}</p>
          </div>
          <ImgT src="/imgs/club/arrow.png" :key="'arrow'" class="arrow" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue';

import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';
import { Page } from '@/store/page';
const { lang } = storeToRefs(Page(pinia));;
const { t } = useI18n();
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { showToast } from "@nutui/nutui";
import { getSelfGameUrl } from '@/utils/useNetMethods';

const props = defineProps<{
  gamblingList: any[];
}>();


const playType: any = ref({
  1: t('club_page_jd'),
  2: t('club_page_dp'),
})

const gameClubIds: any = ref({
  49: t('club_page_49'),
  47: t('club_page_47'),
})

// 动态计算背景样式
const getBackgroundStyle = (type: number) => {
  switch (type) {
    case 49:
      return {
        background: 'linear-gradient(90deg, #83FFAA -9.41%, #0FC953 87.44%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      };
    case 47:
      return {
        background: 'linear-gradient(91deg, #5FFF74 4.63%, #0AC51C 82.74%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      };
    case 3:
      return {
        background: 'linear-gradient(90deg, #A6E942 12.19%, #58DB3E 69.95%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      };
    case 4:
      return {
        background: 'linear-gradient(89deg, #3DE6A5 5.3%, #06AE3E 89.84%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      };
    case 5:
      return {
        background: 'linear-gradient(89deg, #68B1FF -5.33%, #1F6BDE 84.84%)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      };
    default:
      return {};
  }
};

// 进入游戏 
const goToGameRoom = (item: any) => {
  console.log('item', item)
  const req = NetPacket.req_room_open();
  req.room_id = item.room_id;

  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_room_operate",
    callback: (res: any) => {
      // const tipStr: any = {
      //   1: '牌桌不存在',
      //   2: '牌局已停止',
      //   3: '已满桌',
      //   4: '不能重复加入牌局',
      // };
      showToast.text(res.result)
      let langObj: any = {
        'en-US': 3,
        'vi-VN': 2,
        'zh-CN': 1
      }
      getSelfGameUrl(item, langObj[lang.value], Page(pinia))
    },
  });
}
</script>

<style scoped lang="scss">
.card_container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0 auto;


  .card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // width: 347px;
    height: 60px;
    border-radius: 10px;
    padding: 0 0 0 15px;
    background: url(/imgs/club/add_club_bg.png) no-repeat;
    background-size: 100% 100%;
    box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

    .info {
      width: 145px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .title {
        color: #FFF;
        font-size: 14px;
        font-weight: 500;

        .text {
          font-family: HYYaKuHeiW;
          font-size: 14px;
          font-weight: 400;
        }
      }

      .details {
        // display: flex;
        // justify-content: space-between;
        margin-top: 5px;
        font-size: 14px;
        color: #a0a0b0;

        .jinbi {
          width: 16px;
          height: 16px;
          margin-right: 8px;
          vertical-align: sub;
        }

        .price {
          margin-right: 15px;
          color: #C6C4F5;
          text-align: center;
        }
      }
    }

    .players_box {

      .players {
        .icon_player {
          width: 20px;
          height: 20px;
          margin: 0 auto;
          display: block;
        }

        span {
          color: #C6C4F5;
          font-family: "PingFang SC";
          font-size: 14px;
          font-style: normal;
          font-weight: 500;
          line-height: 14px;
        }
      }
    }

    .action {
      display: flex;
      align-items: center;
      width: 90px;
      height: 100%;
      background: rgba(250, 250, 250, 0.21);
      border-radius: 8px;
      padding: 5px 15px;

      .button {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border-radius: 8px;
        color: #ffffff;
        font-size: 14px;

        .price {
          color: #C6C4F5;
          text-align: center;
        }
      }

      .arrow {
        width: 16px;
        height: 16px;
        margin-left: 15px;
      }
    }
  }
}
</style>